<script setup>
import { defineProps, defineEmits, onMounted} from "vue";

const props = defineProps(["data"]);
const emit = defineEmits(["close"]);

// 模拟咨询师数据（与编辑组件一致）
const consultants = [
  {id: 1, name: "张三"},
  {id: 2, name: "李四"},
  {id: 3, name: "王五"}
];

// 组件加载时获取数据
onMounted(() => {
  console.log('查看详情数据:', props.data);
});

// 获取咨询师名称
const getConsultantName = (id) => {
  return consultants.find(c => c.id === id)?.name || '未知';
};
</script>

<template>
  <div class="detail-container">
    <el-form :model="props.data" label-width="100px">
      <!-- ID -->
      <el-form-item label="ID：">
        <el-input :model-value="props.data.id" disabled />
      </el-form-item>

      <!-- 标题 -->
      <el-form-item label="标题：">
        <el-input :model-value="props.data.title" readonly />
      </el-form-item>

      <!-- 图片部分 -->
      <el-form-item label="图片：">
        <div class="image-container">
          <div class="image-wrapper">
            <el-image
                v-if="props.data.image"
                :src="`/api/img?imgUrl=${props.data.image}`"
                :preview-src-list="[`/api/img?imgUrl=${props.data.image}`]"
                :style="imageStyle"
                fit="contain"
                hide-on-click-modal
            >
              <template #error>
                <div class="image-error">
                  <el-icon><Picture /></el-icon>
                  <span>图片加载失败</span>
                </div>
              </template>
            </el-image>
            <div v-else class="empty-image">
              <el-icon><Picture /></el-icon>
              <span>暂无图片</span>
            </div>
          </div>
        </div>
      </el-form-item>

      <!-- 简介 -->
      <el-form-item label="简介：">
        <el-input
            :model-value="props.data.intro"
            type="textarea"
            :rows="3"
            readonly
        />
      </el-form-item>

      <!-- 音频文件 -->
      <el-form-item label="音频文件：">
        <el-input :model-value="props.data.fmFileName" readonly />
      </el-form-item>

      <!-- 咨询师 -->
      <el-form-item label="咨询师：">
        <el-input
            :model-value="getConsultantName(props.data.consultantId)"
            readonly
        />
      </el-form-item>

      <!-- 发布时间 -->
      <el-form-item label="发布时间：">
        <el-input
            :model-value="props.data.publishTime"
            readonly
        />
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="info" @click="emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<style scoped>
.detail-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* 输入项样式 */
:deep(.el-input__wrapper) {
  background-color: #f5f7fa;
  box-shadow: none;
  cursor: default;
}


.empty-image .el-icon {
  font-size: 30px; /* 缩小图标大小 */
  margin-bottom: 8px;
  color: #c0c4cc;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}

/* 图片容器 */
.image-container {
  display: flex;
  justify-content: center;
}

.image-wrapper {
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  overflow: hidden;
  background-color: #f5f7fa;
}

/* 图片错误状态 */
.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.image-error .el-icon {
  font-size: 40px;
  margin-bottom: 8px;
  color: #c0c4cc;
}
</style>